<template>
  <div class="cart-bottomBar">

    <!-- 全选 -->
    <div class="checked-all">
      <CheckBtn class="check-btn" :isActive="checkedAll" @click.native="allCheck"/>
      <span>全选</span>
    </div>

    <!-- 合计 -->
    <div class="total-price">
      <span>合计:{{totalPrice}}</span>
    </div>

    <!-- 结算按钮 -->
    <div class="pay-for" @click="payFor">
      <span>结算({{payForNumber}})</span>
    </div>
  </div>
</template>

<script>
// 逻辑组件
import CheckBtn from './CheckBtn';

// vux导入
import { mapGetters } from 'vuex';

export default {
  name: 'cartBottomBar',
  components: {
    CheckBtn
  },
  computed: {
    ...mapGetters(['getCartList']), // 导入vux的getters
    totalPrice() { // 计算总价,选中的价格
      return '￥:' + this.getCartList.filter(item => {
        return item.checked
      }).reduce((prv, now) => {
        return prv + now.price * now.count
      }, 0).toFixed(2);
    },
    payForNumber() { // 付款件数
      return this.getCartList.filter(item => item.checked).length;
    },
    checkedAll() { // 判断是否全选
      // console.log(!this.getCartList.some(item => !item.checked));
      if(this.getCartList.length === 0) return false;
      return !this.getCartList.some(item => !item.checked);
    }
  },
  activated() {

  },
  methods: {
    allCheck() { // 全选 / 全不选
      if(this.checkedAll) {
        this.getCartList.forEach(item => {
          item.checked = false;
        });
      } else {
        this.getCartList.forEach(item => {
          item.checked = true;
        });
      }
      
    },
    payFor() { // 结算
      if(this.payForNumber === 0) {
        this.$toast.show('请选择商品再进行结算', 2000);
      }

    }
  }

}
</script>

<style scoped>
  .cart-bottomBar{
    height: 40px;

    position: relative;
    display: flex;

    background-color: rgba(224, 224, 224, .3)
  }

  /* 全选按钮 */
  .checked-all{
    padding-left: 10px;

    width: 100px;
  }
  .checked-all span{
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
  }

  /* 合计 */
  .total-price{
    flex: 1;

    line-height: 40px;
  }

  /* 结算 */
  .pay-for{
    width: 100px;
    background-color: var(--color-tint);
    color: #fff;
    line-height: 40px;
    text-align: center;
    font-size: 17px;
  }
</style>